window.onload = function () {
    var imgarr = document.querySelectorAll("#imglist li a img");
    var imglist = document.getElementById("imglist")
    var imgarr2 = document.querySelectorAll("#imglist2 li a img");
    var imglist2 = document.getElementById("imglist2");

    // 定义一个自动切换的公共函数
    var index = 0;
    var timer;
    autochange(imglist, imgarr, 520);

    // autochange(imglist2,imgarr2,250);
    function autochange(obj, arr, wy) {
        timer = setInterval(function () {
            index++;
            index %= arr.length;
            // 执行动画
            move(obj, -wy * index, 50, "left", function () {
                // 判断如果是最后一张图片则将index设为0从头开始
                if (index >= arr.length - 1) {
                    index = 0;
                    // 通过css直接将图片放回第一张
                    obj.style.left = 0;
                }
            });

        }, 3000);

    }

    function move(obj, target, speed, attr, callback) {
        // 关闭上一个定时器
        clearInterval(obj.timer);
        // 获取当前的left值
        var currentvalue = parseInt(getstyle(obj, attr));
        // 判断速度
        // 从0-800则speed为正 从800-0则speed为负
        if (currentvalue > target) {
            speed = -speed;
        }
        // console.log(speed);
        obj.timer = setInterval(function () {
            // 获取当前的left值
            var oldvalue = parseInt(getstyle(obj, attr));
            // 获取新的值
            var newvalue = oldvalue + speed;

            if (speed < 0 && newvalue < target || speed > 0 && newvalue > target) {
                newvalue = target;
            }
            obj.style[attr] = newvalue + "px";
            if (newvalue == target) {
                clearInterval(obj.timer);
                // 回调函数在程序执行完后才会产生效果
                // 如果有传回调函数则用没有就不用,此时需要做个判断不然会报错
                callback && callback();
            }

        }, 30);
    }

    function getstyle(obj, name) {
        if (window.getComputedStyle) {
            return getComputedStyle(obj, null)[name];
        } else {
            return obj.currentStyle[name];
        }
    }


}
